<template>
    <div class="addproductCategory-wrap">
        <el-button type="primary" @click="show" size="small">{{$t('m.button.newProduct')}}</el-button>
        <el-dialog
            :title="$t('m.button.newProduct')"
            :visible.sync="dialogFormVisible"
            width="400px"
        >
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
                <el-form-item :label="$t('m.label.ownBu')" prop="businessUnitId">
                    <BU
                        :form="ruleForm"
                        formId="businessUnitId"
                        addSize="mini"
                        @selectAll="getBrand"
                        size="small"
                    ></BU>
                </el-form-item>
                <el-form-item :label="$t('m.label.productBrand')" prop="productBrandId">
                    <brand
                        ref="brand"
                        :form="ruleForm"
                        formBU="businessUnitId"
                        formCategory="brand"
                        formId="productBrandId"
                        addSize="mini"
                        size="small"
                    ></brand>
                </el-form-item>
                <el-form-item :label="$t('m.label.productCategory')" prop="categoryId">
                    <category
                        ref="category"
                        :form="ruleForm"
                        formBU="businessUnitId"
                        formCategory="categoryId"
                        formId="categoryId"
                        addSize="mini"
                        size="small"
                    ></category>
                </el-form-item>
                <el-form-item :label="$t('m.label.productModelNumber')" prop="productModelNumber">
                    <el-input
                        v-model="ruleForm.productModelNumber"
                        autocomplete="off"
                        @blur="getResembleModelNumber"
                        size="small"
                    ></el-input>
                </el-form-item>
                <el-row :gutter="20">
                    <el-col :span="24" v-for="(item,index) in modelNumberAndAsin" :key="index">
                        <div class="grid-content bg-purple">
                            <el-link
                                :href="'#/productCenter/productBasicInfo?asin=' + item.asin"
                                target="_blank"
                                :underline="false"
                            >
                                {{
                                item.asin
                                }}
                            </el-link>
                            <el-link
                                :href="'#/productCenter/productBasicInfo?model=' + item.productModelNumber"
                                target="_blank"
                                :underline="false"
                            >
                                {{
                                item.productModelNumber
                                }}
                            </el-link>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button
                    type="primary"
                    @click="addProduct('ruleForm')"
                    size="small"
                    :disabled="loading"
                    :icon="loading?'el-icon-loading':'el-icon-circle-plus-outline'"
                >{{$t('m.button.confirm')}}</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
const ERR_OK = 200;
import { BU, brand, category } from "components/searchfor";
export default {
    data() {
        return {
            ruleForm: {
                businessUnitId: "",
                productBrandId: "",
                categoryId: "",
                productModelNumber: ""
            },
            modelNumberAndAsin: "",
            AllBU: [],
            category: [],
            dialogFormVisible: false,
            loading: false,
            rules: {
                categoryId: [
                    {
                        required: "change",
                        message: this.$t("m.placeholder.selectCategory"),
                        trigger: "blur"
                    }
                ],
                businessUnitId: [
                    {
                        required: true,
                        message: this.$t("m.placeholder.selectBu"),
                        trigger: "change"
                    }
                ],
                productBrandId: [
                    {
                        required: true,
                        message: this.$t("m.placeholder.selectBrand"),
                        trigger: "change"
                    }
                ],
                productModelNumber: [
                    {
                        required: true,
                        message: this.$t("m.placeholder.pleaseEnteProductModelNumber"),
                        trigger: "change"
                    }
                ]
            }
        };
    }, 
    methods: {
        getBrand() {
            this.$refs.brand.getBrand();
        },
        getResembleModelNumber() {
            this.$ajax
                .get(
                    this.GLOBAL.productService +
                        "/product/resembleModelNumber?productModelNumber=" +
                        this.ruleForm.productModelNumber
                )
                .then(res => {
                    if (res.data.code === ERR_OK) {
                        this.modelNumberAndAsin = res.data.data.data;
                    }
                });
        },
        show() {
            this.dialogFormVisible = true;
        },
        addProduct(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.loading = true;
                    this.$ajax
                        .post(
                            this.GLOBAL.productService +
                                "/product/addProduct?buId=" +
                                this.ruleForm.businessUnitId +
                                "&categoryId=" +
                                this.ruleForm.categoryId +
                                "&productBrandId=" +
                                this.ruleForm.productBrandId +
                                "&productModelNumber=" +
                                this.ruleForm.productModelNumber +
                                "&userId=" +
                                this.$store.getters.userId
                        )
                        .then(res => {
                            if (res.data.code === ERR_OK) {
                                this.dialogFormVisible = false;
                                this.$message.success(res.data.msg);
                                this.$refs[formName].resetFields();
                                this.$parent.loadForm = false;
                                this.$nextTick(() => {
                                    this.$parent.loadForm = true;
                                });
                            } else {
                                this.$message.error(res.data.msg);
                            }
                            this.loading = false;
                        });
                } else {
                    return false;
                }
            });
        }
    },
    components: {
        category,
        BU,
        brand
    }
};
</script>

<style lang="stylus" scoped>
.addproductCategory-wrap {
    display: inline-block;

    .el-form-item {
        margin-bottom: 15px;
        width: 280px;
    }

    .grid-content.bg-purple {
        font-size: 0;

        a {
            display: inline-block;
            width: 50%;
            font-size: 14px;
        }
    }
}
</style>
